<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>图书管理</title>
  <link rel="stylesheet" href="css/index.css" />
  <script src="../../js/jquery.min.js"></script>
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="../../js/axios.min.js"></script>
</head>

<body>
  <button id="ks">开始自动删除</button>
  <h1>添加新书</h1>
  <form class="info" autocomplete="off">
    书名<input type="text" class="uname" name="uname" />
    作者<input type="text" class="age" name="age" />
    出版社<input type="text" class="salary" name="salary" />
    <button class="add">添加</button>
    <!-- <a href=""></a> -->
    <!-- <a href="javascript:;" class="add">添加</a> -->
  </form>

  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <td>${item.id}</td>
      <td>${item.bookname}</td>
      <td>${item.author}</td>
      <td>${item.publisher}</td>
      <td>
        <a href="javascript:;" data-id="${index}">删除</a>
      </td> -->
    </tbody>
  </table>
  <script>
    $(() => {
      //渲染函数
      const renderer = () => {
        $('tbody').html('')
        //发起get请求
        $.ajax({
          type: 'GET',//请求方式
          url: 'http://liulongbin.top:3006/api/getbooks',//请求的url地址
          success: res => {//请求成功后的回调函数
            if (res.status !== 200) return alert('数据请求失败')
            $('tbody').append(
              res.data.map(item => `
              <tr>
                <td>${item.id}</td>
                <td>${item.bookname}</td>
                <td>${item.author}</td>
                <td>${item.publisher}</td>
                <td>
                  <a href="javascript:;"data-id="${item.id}" class='del'>删除</a>
                </td>
              <tr/>
            `).join(''))
          }
        })
      }
      renderer()

      //添加图书模块
      $('.info').on('submit', e => {
        e.preventDefault()
        let bookname = $('.uname').val().trim()
        let author = $('.age').val().trim()
        let publisher = $('.salary').val().trim()
        if (!bookname && !author && !publisher) return alert('请填写完整信息')
        $.ajax({
          type: 'POST',
          url: 'http://liulongbin.top:3006/api/addbook',
          data: { bookname, author, publisher },
          success: res => {
            if (res.status !== 201) return alert('数据请求失败')
            renderer()
            document.querySelector('.info').reset()

          }
        })
      })

      // 删除图书模块
      $('tbody').on('click', '.del', function () {
        $.ajax({
          type: 'GET',
          url: 'http://liulongbin.top:3006/api/delbook',
          data: { id: $(this).data('id') },
          success: res => {
            if (res.status !== 200) return alert('数据删除失败')
            renderer()
          }
        })
      })
      $('#ks').on('click', () => {
        setInterval(() => {
          axios({
            method: 'GET',
            url: 'http://liulongbin.top:3006/api/getbooks',
          })
            .then(res => {
              const arrId = res.data.data.map(item => {
                return item.id
              })
              return function () {
                for (const val of arrId) {
                  if (val > 3) {
                    axios({
                      method: 'GET',
                      url: 'http://liulongbin.top:3006/api/delbook?id=' + val,
                    })
                  }
                }
              }
            })
            .then(res => {
              res()
            })
        }, 200)
      })
    })
  </script>
</body>

</html>